<template>
    <div class="list">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索 -->
        <div style="margin: 15px; text-align:center;">
            <el-button type="primary" class="fl" @click="$router.push({path:'add'})">添加商品</el-button>
            <el-input placeholder="请输入商品名称" v-model="searchData" class="input-with-select" style="width:500px;" @input="search">
                <el-button slot="append" icon="el-icon-search" style="width:100px" @click="search">搜索</el-button>
            </el-input>
        </div>
        <!-- 商品列表 -->
        <div class="goods_table">
            <div>
                <el-table :data="goodsData" stripe style="width: 100%">
                    <el-table-column type="index">
                    </el-table-column>
                    <el-table-column prop="goods_name" label="商品名称" width="700px">
                    </el-table-column>
                    <el-table-column prop="goods_price" label="商品价格" width="100px">
                    </el-table-column>
                    <el-table-column prop="goods_number" label="商品数量" width="100px">
                    </el-table-column>
                    <el-table-column prop="goods_weight" label="商品重量" width="100px">
                    </el-table-column>
                    <el-table-column prop="upd_time" label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作" style="text-align:right">
                        <div slot-scope="scope">
                            <el-button type="success" icon="el-icon-edit" @click="editUser(scope.row),dialogVisible = true" plain></el-button>
                            <el-button type="success" icon="el-icon-delete" @click="handleDelGoods(scope.row)" plain></el-button>
                        </div>
                    </el-table-column>
                </el-table>
            </div>
            <div class="block">
                <!-- <span class="demonstration">显示总数</span> -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagenum" :page-size="pagesize" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { getGoods, delGoods } from "../../api/index.js";
export default {
  data() {
    return {
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        goods_cat: [
          { required: true, message: "请选中分类列表", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" }
        ]
      },
      //商品数组
      goodsData: [],
      //添加商品数组:
      addGoodsData: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: "",
        attrs: []
      },
      //分页数据
      pagenum: 1,
      pagesize: 10,
      total: 1,
      //   currentPage: 1,
      //搜索功能
      searchData: "",
      //模态框
      dialog_addGoods: false,
      time: ""
    };
  },
  mounted() {
    this.showGoods();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    showGoods() {
      getGoods({
        query: this.searchData,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(res => {
        console.log(res.data);
        this.goodsData = res.data.goods;
        this.total = res.data.total;
      });
    },
    //搜索功能
    search() {
      if (this.pagenum > this.total / this.pagesize) {
        this.pagenum = 1;
      }
      this.showGoods();
    },
    //分页数量
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.showGoods();
    },
    // 分页跳转
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.showGoods();
    },
    handleGoodsNum(value) {
      console.log(value);
    },
    //删除指定商品
    handleDelGoods(row) {
      //   console.log(row);
      delGoods(row.goods_id).then(res => {
        // console.log(res);
        this.$message({
          message: res.meta.msg,
          type: "success"
        });
        this.showGoods();
      });
    }
  }
};
</script>


<style scoped>
.block {
  margin-top: 50px;
  text-align: center;
}
</style>
